Update the DOM Easily with the Re:dom Library — SVG and Components

tm_medium=referral) on Unsplash

We can update the DOM with the Re:dom library in a way easier than plain JavaScript.

In this article, we’ll look at how to use the library to diff the DOM and patch it.

SVG

We can use the svg method to add SVGs.

For example, we can write:

import { svg, mount } from "redom";

const drawing = svg(
  "svg",
  svg(
    "symbol",
    { id: "box", viewBox: "0 0 50 50" },
    svg("rect", { x: 100, y: 100, width: 50, height: 50 })
  ),
  svg("circle", { r: 50, cx: 100, cy: 100 }),
  svg("use", { xlink: { href: "#box" } })
);

mount(document.body, drawing);

We add the center of the circle with cx and cy .

x and y are the coordinates of the top left corner.

width and height are the width and height.

Children

We can add the children to the component by writing:

import { el, setChildren } from "redom";

const p = el("p", "foo");
const div = el("div", "bar");
const span = el("span", "baz");

setChildren(document.body, [p, div, span]);

We call setChildren with an array of elements with the items.

Update Elements

The setAttr method lets us set the attributes of an element:

import { el, setAttr, mount } from "redom";

const hello = el("h1", "Hello!");

setAttr(hello, {
  style: { color: "red" },
  className: "hello"
});

mount(document.body, hello);

We set the style attribute to an object to set the styles.

className is the class attribute.

Also, we can set the styles with the setStyle method:

import { el, setStyle, mount } from "redom";

const hello = el("h1", "Hello!");

setStyle(hello, { color: "green" });

mount(document.body, hello);

Mount

The mount metho can be used to insert elements anywhere.

For example, we can write:

import { el, mount } from "redom";

const hello = el("h1", "Hello!");

mount(document.body, hello);

to append as a child of the body.

Also, we can insert before an element by providing a 3rd argument:

import { el, mount } from "redom";

const hello = el("h1", "Hello!");

mount(document.body, hello, document.body.firstChild);

It’ll insert the h1 before the first child of the body.

We can replace an existing element by passing in the old and new element and true as the 4th argument:

import { el, mount } from "redom";

const hello = el("h1", "Hello!");
const newElement = el("h1", "new");
mount(document.body, hello);
mount(document.body, newElement, hello, true);

The new element goes is the 2nd argument.

And the existing is in the 3rd argument.

Unmount

We can call unmount to unmount an element:

import { el, mount, unmount } from "redom";

const hello = el("h1", "Hello!");
mount(document.body, hello);
unmount(document.body, hello);

Components

We can create a component with a JavaScript class.

For example, we can write:

import { el, mount } from "redom";

class Hello {
  constructor() {
    this.el = el("h1");
  }
  update(data) {
    this.el.textContent = `Hello ${data}`;
  }
}

const hello = new Hello();
hello.update("world");

mount(document.body, hello);

to create a component with a plain JavaScript class.

In the constructor, we create an element.

Then we set the textContent property of this.el with our own content in the update method.

We then mount the component with mount into the body.

Conclusion

We can add components, update elements, and SVGs with Re:dom.